<template>
 <div>
    <fou-dialog :title="'請輸入延遲的天數'" v-model:dialogValue="ticdialog" :width="'30%'" center>
        <template #content>
            <div class="flex justify-center w-[100%]">
                <el-input-number v-model="day" :min="1" @change="handleChange" />
            </div>
            <div class="flex justify-between items-center pl-[60px] pr-[60px] mt-[40px]">
                <div>
                    <div>原定日期</div>
                    <div>{{pastTime}}</div>
                </div>
                <div><img src="../../../../assets/icon/to.png" alt=""></div>
                <div>
                    <div>延長日期</div>
                    <div style="color:#58A4B0">{{nowTime}}</div>
                </div>
            </div>

        </template>
        <template #footer>
            <div class="flex justify-center ">
                <el-button @click="ticdialog = false">取消</el-button>
                <el-button color="#081F42" @click="confirm">確定</el-button>
            </div>
        </template>
    </fou-dialog>
 </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import { dayjs } from "element-plus";
import {lengthenTime} from '@/http/index.js'
import {message} from '@/common/function.js'
const ticdialog = ref(false)
const day = ref(1)
const pastTime = ref('')
const id = ref('')
const init = (e)=>{
    id.value = e.id
    pastTime.value = e.hereto
    ticdialog.value = true
    handleChange()
}
const nowTime = ref('')
const handleChange = ()=>{
    nowTime.value = dayjs(pastTime.value).add(day.value, 'day').format('YYYY-MM-DD HH:mm:ss');
}
const emit = defineEmits(['update'])
const confirm = async ()=>{
    let obj = {
        id:id.value,
        day:day.value
    }
    const data = await lengthenTime(obj)
    if (data.code == 200) {
        message('成功延長套票使用時間')
        ticdialog.value = false
        emit('update')
    }
}
defineExpose({
    init
})
</script>

<style scoped lang='less'>
.a{
    justify-content: space-between;
}
</style>